<template>
    <el-container>
        <el-header>
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
                <el-tab-pane label="设备利用率报表" name="0"></el-tab-pane>
                <el-tab-pane label="设备开机率报表" name="1"></el-tab-pane>
                <el-tab-pane label="设备维修统计" name="2"></el-tab-pane>
                <el-tab-pane label="设备点检表" name="3"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-main class="nopadding" v-if="groupId==0">
            <el-card shadow="never" class="data_card_mid_right" >
                <scEcharts height="300px" :option="option"></scEcharts>
            </el-card>
            <scTable ref="table" :apiObj="mainData" row-key="id" stripe border :params="query" height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="设备代码" prop="device_code" align="center"></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-01" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-02" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-03" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-04" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-05" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-06" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-07" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-08" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-09" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-10" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-11" prop="device_title" align="center"></el-table-column>
            </scTable>
        </el-main>
        <el-main class="nopadding" v-if="groupId==1">
            <el-card shadow="never" class="data_card_mid_right" >
                <scEcharts height="300px" :option="option"></scEcharts>
            </el-card>
            <scTable ref="table" :apiObj="mainData" row-key="id" stripe border :params="query" height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="设备代码" prop="device_code" align="center"></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-01" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-02" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-03" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-04" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-05" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-06" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-07" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-08" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-09" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-10" prop="device_title" align="center"></el-table-column>
                <el-table-column label="3-11" prop="device_title" align="center"></el-table-column>
            </scTable>
        </el-main>
        <el-main class="nopadding" v-if="groupId==2">
            <el-card shadow="never" class="data_card_mid_right" >
                <scEcharts height="300px" :option="options"></scEcharts>
            </el-card>
            <scTable ref="table" :apiObj="logData" row-key="id" stripe border :params="query" height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="巡检任务单号" prop="task_code" align="center"></el-table-column>
                <el-table-column label="设备编号" prop="device_code" align="center"></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                <el-table-column label="设备类别" prop="class_title" align="center"></el-table-column>
                <el-table-column label="巡检人" prop="admin_name" align="center"></el-table-column>
                <el-table-column label="巡检部门" prop="admin_name" align="center"></el-table-column>
                <el-table-column label="巡检开始时间" prop="create_time" align="center"></el-table-column>
                <el-table-column label="巡检结束时间" prop="create_time" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </scTable>
        </el-main>
        <el-header v-if="groupId==3">
            <div class="right-panel-search">
                <div class="search-input">设备名称</div>
                <el-input v-model="search.keywords" placeholder="请输入设备名称" clearable></el-input>
                <div class="search-input">点检日期</div>
                <el-date-picker v-model="search.deliver_time" :value-format="'YYYY-MM-DD'" type="data" placeholder="请选择订单交期" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="groupId==3">
            <scTable ref="table" :apiObj="logsData" stripe remoteSort remoteFilter border :params="query" >
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="设备名称" prop="task_code" align="center"></el-table-column>
                <el-table-column label="点检内容" prop="device_code" align="center"></el-table-column>
                <el-table-column label="点检标准" prop="device_title" align="center"></el-table-column>
                <el-table-column label="点检日期" prop="class_title" align="center"></el-table-column>
                <el-table-column label="点检人员" prop="admin_name" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import scStatistic from "@/components/scStatistic";
    export default {
        components: {scEcharts, scStatistic,},
        data() {
            return {
                menuId:0,
                info:{},
                mainData:this.$API.device.ProjectLog.lists,//保养记录
                taskData:this.$API.device.deviceTask.getService,//维修记录
                logData: this.$API.device.InspectionProjectLog.lists,//巡检记录
                logsData: this.$API.device.deviceDianJian.record.lists,//点检记录
                query:{
                    device_id: this.$route.query.id,
                },
                querys:{
                    device_id: this.$route.query.id,
                    sta:2
                },
                groupId:"0",
                option : {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                        }
                    ]
                },
                options: {
                    grid: {
                    top: "80px",
                    },
                    tooltip: {
                    trigger: "axis",
                    },
                    xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    },
                    yAxis: {
                    type: "value",
                    },
                    series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: "bar",
                        barWidth: "15px",
                    },
                    {
                        data: [110, 180, 120, 120, 60, 90, 110],
                        type: "bar",
                        barWidth: "15px",
                    },
                    ],
                },
                search:{
                    keyword:null,
                    deliver_time:null
                }
            }
        },
        mounted () {
            // this.detail();
            // this.checkTask()
            // this.checkLog()
        },
        methods: {
            menuChange(item) {
                this.menuId = item.id
            },
            async detail(){
                var checkLog = await this.$API.all.getCheckLog.get({device_id:this.id});//点检记录
                this.logData = checkLog.data
                var checkTask = await this.$API.all.getTask.get({device_id:this.id});//维修工单
                this.taskData = checkTask.data
            },
            //维修工单
            async checkTask(){
                var res = await this.$API.all.getTask.get({device_id:this.id});
                this.taskData = res.data
            },
            //点检记录
            async checkLog(){
                var res = await this.$API.all.getCheckLog.get({device_id:this.id});
                this.logData = res.data
            },
            // tab切换
            tabChange(e){
                this.groupId = e
            },
        },
    }
</script>

<style lang="scss" scoped>
.display{
    display: flex;
    align-items: center;
    .title{
        width: 70px;
        text-align-last: justify;
        background: #f4faff;
        padding: 8px;
        margin: 5px 0;
    }
    .width{
        width: 80px;
    }
    .detail{
        margin-left: 10px;
        .img{
            width: 100px;
            height: 100px;
        }
    }
}
.left{
    display: flex;
    align-items: start;
    .tabbar{
        background: #f4f4f4;
        height: 80vh;
        margin-right: 20px;
        border-radius: 8px;
        .tabList{
            padding: 16px 34px;
            text-align: center;
            color: #000;
            border-radius: 4px;
            cursor: pointer;
        }
    }
}
.background{
    background: #01a066;
    color: #FFF !important;
}
</style>